import React, { Component } from "react";

import { Carousel } from "antd-mobile";

import axios from "axios";
export default class Swiper extends Component {
    state = {
        data: ["1", "2", "3"],
        imgHeight: 176,
    };
    componentDidMount() {
        // simulate img loading
        setTimeout(() => {
            this.setState({
                data: ["AiyWuByWklrrUDlFignR", "TekJlZRVCjLFexlOCuWn", "IJOtIlfsYdTyaDTRVrLI"],
            });
        }, 100);
        this.getSwiper();
    }

    // componentDidMount() {
    //     this.getSwiper();
    // }

    getSwiper = async () => {
        let data = await axios.get("http://e.ludir.cn:8081/home/swiper");
        console.log(data.data.body);
        data.data.body.map((val) => {
            val.imgSrc = "http://e.ludir.cn:8081" + val.imgSrc;
        });
        this.setState({
            data: data.data.body,
        });
    };

    render() {
        return (
            <div>
                <Carousel
                    autoplay={false}
                    infinite
                    beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                    afterChange={(index) => console.log("slide to", index)}
                >
                    {this.state.data.map((val) => (
                        <a
                            key={val}
                            href="http://www.baidu.com"
                            style={{
                                display: "inline-block",
                                width: "100%",
                                height: this.state.imgHeight,
                            }}
                        >
                            <img
                                src={val.imgSrc}
                                alt=""
                                style={{ width: "100%", verticalAlign: "top" }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event("resize"));
                                    this.setState({ imgHeight: "auto" });
                                }}
                            />
                        </a>
                    ))}
                </Carousel>
            </div>
        );
    }
}
